<template>
  <div class="container">
    <h1>条码生成器</h1>
    <div class="note">在此页面您可以生成多种格式的条形码，支持批量生成</div>
    
    <div class="layout-toggle">
      <span>显示方式：</span>
      <label class="switch">
        <input type="checkbox" v-model="isVerticalLayout">
        <span class="slider"></span>
      </label>
      <span>{{ isVerticalLayout ? '竖排显示' : '横排显示' }}</span>
    </div>
    
    <div class="barcode-display" :class="{ 'vertical': isVerticalLayout, 'horizontal': !isVerticalLayout }">
      <div v-for="(barcode, index) in barcodes" :key="index" class="barcode-item">
        <svg class="barcode" ref="barcodeElements"></svg>
      </div>
    </div>
    
    <div class="input-section">
      <textarea 
        v-model="inputText" 
        placeholder="请输入条码内容，多个条码以回车换行分割"
        rows="5"
      ></textarea>
    </div>
    
    <div class="options-section">
      <label for="barcode-format">条码格式:</label>
      <select id="barcode-format" v-model="selectedFormat">
        <option v-for="format in barcodeFormats" :key="format.value" :value="format.value">
          {{ format.label }}
        </option>
      </select>
    </div>
    <div>
      <button @click="generateBarcodes" class="generate-btn">立即生成</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'

interface BarcodeFormat {
  label: string
  value: string
}

const inputText = ref<string>('')
const isVerticalLayout = ref<boolean>(true)
const barcodes = ref<string[]>([])
const barcodeElements = ref<SVGSVGElement[]>([])
const selectedFormat = ref<string>('CODE128')

const barcodeFormats: BarcodeFormat[] = [
  { label: 'CODE128', value: 'CODE128' },
  { label: 'CODE39', value: 'CODE39' },
  { label: 'EAN-13', value: 'EAN13' },
  { label: 'EAN-8', value: 'EAN8' },
  { label: 'UPC-A', value: 'UPC' },
  { label: 'UPC-E', value: 'UPCE' },
  { label: 'ITF', value: 'ITF' },
  { label: 'ITF-14', value: 'ITF14' },
  { label: 'MSI', value: 'MSI' },
  { label: 'MSI10', value: 'MSI10' },
  { label: 'MSI11', value: 'MSI11' },
  { label: 'MSI1010', value: 'MSI1010' },
  { label: 'MSI1110', value: 'MSI1110' },
  { label: 'Pharmacode', value: 'pharmacode' },
  { label: 'Codabar', value: 'codabar' }
]

function generateBarcodes() {
  barcodes.value = inputText.value.split('\n').filter(item => item.trim() !== '')
}

watch([barcodes, selectedFormat], () => {
  nextTick(() => {
    if (barcodeElements.value && barcodeElements.value.length > 0) {
      barcodeElements.value.forEach((element, index) => {
        if (element && barcodes.value[index]) {
          try {
            JsBarcode(element, barcodes.value[index], {
              format: selectedFormat.value,
              displayValue: true,
              width: 2.5,
              height: 100,
              margin: 10,
              fontSize:28
            })
          } catch (err) {
            console.error('条码生成失败:', err)
            element.innerHTML = '<text x="50%" y="50%" text-anchor="middle">无效数据</text>'
          }
        }
      })
    }
  })
}, { deep: true })

onMounted(() => {
  // 初始化一些示例数据
  inputText.value = ''
  generateBarcodes()
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 90%;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
  padding: 16px;
  box-sizing: border-box;
  gap: 16px;
}

h1 {
  margin: 0;
  font-size: 20px;
  text-align: center;
  padding-bottom: 8px;
}

.note {
  color: #4b5563;
  font-size: 14px;
  text-align: center;
}

.layout-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.barcode-display {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-height: 200px;
  overflow: auto;
}

.barcode-display.vertical {
  flex-direction: column;
}

.barcode-display.horizontal {
  flex-direction: row;
}

.barcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.barcode-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 12px;
  text-align: center;
  word-break: break-all;
  max-width: 150px;
}

.input-section textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.options-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.options-section label {
  font-weight: bold;
}

.options-section select {
  padding: 8px 12px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font-size: 14px;
}

.generate-btn {
  padding: 8px 16px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #0b7dda;
}

@media (max-width: 768px) {
  .options-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .barcode-display {
    justify-content: center;
  }
}
</style>